<!--上报审核页面-->
<script setup>
import activeIcon from '@/assets/img/selected.png'
import inactiveIcon from '@/assets/img/icon_Unfocus.png'
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import { useRouter } from 'vue-router/composables'
import { useOderDispose } from '@/composables/useOderDispose.js'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import { Toast } from 'vant'
import { handleFileData } from '@/utils/helper.js'

const { editDisposeOrderAudit, auditLoading } = useOderDispose()

const router = useRouter()
const detail = ref({})
const inspectFormRef = ref('')
const routerOrigin = ref('')
const formData = reactive({
  orderNo: '',
  auditNodeId: '',
  opinion: '',
  pass: null
})
// 提交表单
const submitForm = () => {
  if (formData.pass === null) {
    Toast('请选择审核结果！')
    return
  }
  editDisposeOrderAudit(formData, routerOrigin.value)
}

onMounted(() => {
  formData.orderNo = router.currentRoute.query.orderNo
  formData.auditNodeId = router.currentRoute.query.auditId
  routerOrigin.value = router.currentRoute.query.routerOrigin
  detail.value = JSON.parse(localStorage.getItem('currentOrderBackNode'))
})
</script>

<template>
  <div class="bg-#F7F8FA h-full">
    <div class="py-16px px-12px mb-12px bg-white">
      <div class="bg-#E9FAF1 rounded-4px py-10px px-12px">
        <div class="flex items-center mb-5px">
          <label
            class="text-12px text-#FFFFFF font-400 leading-17px bg-#36B374 rounded-2px py-2px px-5px mr-2px"
            >上报机构</label
          >
          <span class="text-16px leading-22px font-600 text-#171A1D">{{
            detail.orgName
          }}</span>
        </div>
        <div class="text-#1E2226 text-14px font-400 leading-20px">
          <label>上报原因：</label>
          <span>{{ detail.content }}</span>
        </div>
      </div>
      <div v-if="detail.attachment && detail.attachment.length > 0">
        <DetailItem label="附件" top>
          <FileList
            :files="handleFileData(detail.attachment)"
            :preview="true"
            :upload="false"
          />
        </DetailItem>
      </div>
    </div>
    <van-form
      ref="inspectFormRef"
      class="bg-white"
      scroll-to-error
      :show-error-message="false"
      validate-first
    >
      <van-field
        label-class="pt-5px text-16px font-400 leading-16px text-#54565C"
        label="审核结果"
        name="pass"
        input-align="right"
        required
      >
        <template #input>
          <van-radio-group v-model="formData.pass" direction="horizontal">
            <van-radio :name="true" checked-color="#ee0a24">
              通过
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                  alt=""
                />
              </template>
            </van-radio>
            <van-radio :name="false" checked-color="#ee0a24">
              不通过
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                  alt=""
                />
              </template>
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <CustomTextarea
        :modelValue.sync="formData.opinion"
        :label="formData.pass ? '通过原因' : '不通过原因'"
      />
    </van-form>
    <div class="py-24px px-16px">
      <van-button
        :disabled="formData.pass === null"
        type="primary"
        size="normal"
        block
        @click="submitForm"
        :loading="auditLoading"
      >
        确定
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.van-cell--required::before {
  left: 22vw;
}
</style>
